<style scoped>
.dialogM /deep/ .el-dialog__body {
  padding-bottom: 10px;
}
</style>
<!--  -->
<template>
  <div class="dialogM">
    <el-dialog title="域名重定向绑定" :visible.sync="dialogFormVisible" @closed="close" :close-on-click-modal="false" width="800px">
      <el-form :inline="true" v-loading="loading">
        <el-form-item label="访问域名" :label-width="formLabelWidth">
          <el-select :disabled="disabled" size="medium" v-model="id" placeholder="请选择活动区域">
            <el-option label="请选择" :value="0"></el-option>
            <el-option v-for="(item,index) in from" :key="index" :label="item.domainName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目标域名" :label-width="formLabelWidth">
          <el-select :disabled="disabled" size="medium" v-model="redirectId" placeholder="请选择活动区域">
            <el-option label="请选择" :value="0"></el-option>
            <el-option v-for="(item,index) in to" :key="index" :label="item.domainName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    resetData: {
      type: Function
    }
  },
  data () {
    return {
      dialogFormVisible: false,
      id: 0,
      redirectId: 0,
      formLabelWidth: '120px',
      loading: false,
      disabled: false,
      from: [],
      to: [],
      data: []
    }
  },
  watch: {
    id: {
      handler (newVal) {
        this.to = initTo(this.data)
        if (newVal !== 0) {
          this.to = this.to.filter(element => {
            return element.id !== newVal
          })
        }
      },
      deep: true
    },
    redirectId: {
      handler (newVal) {
        this.from = initFrom(this.data)
        if (newVal !== 0) {
          this.from = this.from.filter(element => {
            return element.id !== newVal
          })
        }
      },
      deep: true
    }
  },
  methods: {
    close () {
      this.id = 0
      this.redirectId = 0
      this.loading = false
      this.disabled = false
      this.from = []
      this.to = []
      this.data = []
    },
    show () {
      // 获取域名列表数据
      this.loading = true
      this.$post('/domain/infos-list').then(response => {
        if (!response || response.length < 2) {
          this.$message.warning('未绑定域名，无法支撑域名重定向！')
          this.dialogFormVisible = false
          return
        }
        this.dialogFormVisible = true
        this.data = response
        this.from = initFrom(this.data)
        this.to = initTo(this.data)
        this.loading = false
      })
    },
    submit () {
      if (this.id < 1) {
        this.$message.error('请选择访问域名！')
        return
      }
      if (this.redirectId < 1) {
        this.$message.error('请选择目标域名！')
        return
      }
      this.loading = true
      // 请求设置 301
      this.$post('/domain/bind-redirect', { id: this.id, redirectId: this.redirectId }).then(response => {
        if (response && parseInt(response) > 0) {
          this.dialogFormVisible = false
          this.resetData()
        }
        this.loading = false
      })
    }
  }
}

function initFrom (response) {
  let items = response.filter(element => {
    return parseInt(element.redirect) > 0
  }).map(element => {
    return element.redirect
  })
  return response.filter(element => {
    if (items && items.length > 0) {
      return parseInt(element.redirect) === 0 && items.indexOf(parseInt(element.id)) === -1
    } else {
      return parseInt(element.redirect) === 0
    }
  })
}
function initTo (response) {
  return response.filter(element => {
    return parseInt(element.redirect) === 0 && parseInt(element.domainType) === 1
  })
}
</script>
